<template>
  <div id="box">
    <div class="login">
      <img src="../assets/logo-text.svg" alt="" />
      <div class="div">
        <input
          type="text"
          class="input"
          placeholder="请输入账号"
          v-model="uname"
        />
      </div>
      <div class="div">
        <input
          type="password"
          class="input"
          placeholder="请输入密码"
          v-model="upwd"
        />
      </div>
      <el-button
        type="primary"
        :plain="true"
        class="btn"
        @click.native="getData"
        >登录</el-button
      >
      <!-- <span class="btn" @click="getData"></span> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
    };
  },
  methods: {
    getData() {
      let params = `uphone=${this.uname}&upwd=${this.upwd}`;
      let url = "http://127.0.0.1:3000/data/users/login";
      this.axios.post(url, params).then((res) => {
        if (res.data.code == 201) {
          this.$message({
            message: "恭喜你，登录成功",
            type: "success",
          });
          localStorage.setItem("token", this.uname);
          this.$router.push("/root/home");
        } else {
          alert("用户名或密码错误");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/indexbackground/indexbackground1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login {
    width: 450px;
    height: 400px;
    background: radial-gradient(circle, red, green);
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    img {
      width: 30%;
      margin: 30px auto 0;
    }
    .div {
      width: 100%;
      text-align: center;
    }
    .input {
      width: 70%;
      height: 50px;
      border: 1px solid gray;
      background: transparent;
      margin: 30px auto;
      outline: none;
      font-size: 18px;
      border-radius: 10px;
      padding: 0 10px;
    }
    .btn {
      width: 100px;
      height: 50px;
      border-radius: 10px;
      margin: 0 auto;
    }
  }
}
</style>
